<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>点击订单管理进入页面</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
    <script src="../js/echarts.min.js"></script>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }

    #Content {
        width: 100%;
        height: 95ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    #Catalog{
        display: block;
        margin-top: 3%;
        margin-left: 30%;
        width: 80ex;
        height: 80ex;
        font-size: 2ex;
        background-color:rgba(256,256,256,0);
        margin-bottom: 10ex;
    }
    .a-managemain, .a:link, .a:visited {
        background-color: #005e21;
        text-decoration: none;
        font-family: helvetica, tahoma, arial, verdana, sans-serif;
        font-size: 1.5ex;

    }
    .a-managemain{
        display: inline-block;
        float: left;
        height: 30ex;
        width: 30ex;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        position: absolute;

    }
    .a-managemain:hover{
        background-size: 30%;
        background-image: url("../image/09-Hornbill.png");
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;

    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 0ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
#container{
    display: inline-block;
    position: absolute;
    float: left;
    top: 40ex;
    left: 20ex;
    background-color: rgba(256,256,256,0.5);
}
#container1{
    display: inline-block;
    position: absolute;
    float: left;
    top: 40ex;
    left: 100ex;
    background-color: rgba(256,256,256,0.5);
}
</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
    <div id="BackLink">
        <a class="Returnto" href="/manage/main"></a>
    </div>
    <div id="Catalog">
        <div id="QuickLinks">
            <a class="a-managemain" th:href="@{'/manage/ordermanagement'}" style="background-color:#fff;top: 12ex;left: 50ex"><img style="width:50%;margin-left: 8.5ex;margin-top: 4ex" src="../image/order-jurassic.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 4ex" src="../image/orderjura.png">
            </a><br />
            <a class="a-managemain" th:href="@{'/manage/ordermanagement'}" href="" style="background-color:#fff;top: 12ex;left: 100ex"><img style="width:50%;margin-left: 9ex;margin-top: 4ex" src="../image/order-search.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 2ex" src="../image/ordersearch.png"></a><br />
            <a class="a-managemain"th:href="@{'/manage/analyseOrders'}"  style="background-color:#fff;top: 12ex;left: 150ex"><img style="width:55%;margin-left: 8.5ex;margin-top: 3.5ex" src="../image/order-garph.png"/>
                <img style="width: 60%;margin-left: 6ex;margin-top: 0ex" src="../image/ordergraph.png"></a>
        </div>
        <div id="container" style="height: 300px;width: 600px ">
        </div>
        <div id="container1" style="height: 300px;width: 600px ">
        </div>
        <div class="chart">
            <table id="numberData" hidden="hidden">
                <tr th:each="number:${session.orderNumber}">
                    <td th:text="${number}" th:value="${number}"></td>
                </tr>
            </table>

            <table id="categoryNum" hidden="hidden">
                <tr th:each="number:${session.categoryNumber}">
                    <td th:text="${number}" th:value="${number}"></td>
                </tr>
            </table>
            <table id="sellNum" hidden="hidden">
                <tr th:each="number:${session.sellNumber}">
                    <td th:text="${number}" th:value="${number}"></td>
                </tr>
            </table>
        </div>
    </div>

</div>
<div th:replace="manageCommon/managebottom"></div>
<script>
    {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var table = document.getElementById("numberData");
        var number = table.getElementsByTagName("td");
        var number1 = number[0].textContent;
        var number2 = number[1].textContent;
        var number3 = number[2].textContent;
        var number4 = number[3].textContent;
        var number5 = number[4].textContent;
        var number6 = number[5].textContent;
        var option;

        option = {
            color: ['#749f83'],
            title: {
                text: '订单金额分布图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    name: '金额',
                    data: ['0-100', '100-200', '200-400', '400-600', '600-1000', '>1000'],
                }
            ],
            yAxis: [
                {
                    name: "订单数",
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '订单数',
                    type: 'bar',
                    barWidth: '50%',
                    data: [number1, number2, number3, number4, number5, number6]
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }
    {
        var dom1 = document.getElementById("container1");
        var myChart1 = echarts.init(dom1);
        var app1 = {};
        var catetable = document.getElementById("categoryNum");
        var selltable = document.getElementById("sellNum");
        var cate = catetable.getElementsByTagName("td");
        var sell = selltable.getElementsByTagName("td");
        var categoryNum = [];
        var sellNum = [];
        for(var j=0;j<cate.length;j++){
            categoryNum.push(cate[j].textContent);
            sellNum.push(sell[j].textContent);
        }

        var option1;

        option1 = {
            color: ['#749f83'],
            title: {
                text: '宠物销量图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    name: '种类',
                    data: categoryNum,

                }
            ],
            yAxis: [
                {
                    name: "销量",
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    barWidth: '60%',
                    data:sellNum
                }
            ]
        };

        if (option1 && typeof option1 === 'object') {
            myChart1.setOption(option1);
        }
    }

</script>
</body>
</html>